<template>
    <div>
      <Card>
        <p slot="title">
            {{showTitle}}
        </p>
        <div>
            <Form class="step-form" ref="tree" :model="tree" :rules="treeRules" :label-width="100">
                <FormItem label="父节点：" prop="pName">
                    <Input :disabled="true" style="width:400px" v-model="tree.pName" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="父节点名称"/>
                </FormItem>
                <FormItem label="名称：" prop="title">
                    <Input :disabled="hasSubmit" style="width:400px" v-model="tree.title" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入字典名称" />
                </FormItem>
                <FormItem label="编号：" prop="code">
                    <Input :disabled="hasSubmit" style="width:400px" v-model="tree.code" type="text" :autosize="{minRows: 0,maxRows: 10}" placeholder="请输入字典编号" />
                </FormItem>
                <FormItem label="排序：" prop="sort">
                    <Input :disabled="hasSubmit" :maxlength="6" style="width:400px" v-model="tree.sort" number :autosize="{minRows: 0,maxRows: 10}" placeholder="请输入字典排序" />
                </FormItem>
                <FormItem label="备注：" prop="remark">
                    <Input :disabled="hasSubmit" style="width:400px" v-model="tree.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息" />
                </FormItem>
                <FormItem label="">
                    <Button :disabled="hasSubmit" @click="submitTreeMes" style="width:100px;" type="primary">提交</Button>
                    <Button :disabled="hasSubmit" @click="resetTreeMes" style="width:100px;" type="primary">重置</Button>
                </FormItem>
            </Form>
        </div>
    </Card>
    </div>
</template>

<script>
import ajax from '../../../../libs/axios.js'
import {
    BUS
} from '@/bus/bus.js'
export default {
    name: 'operateTree',
    data () {
        return {
            tree: {
                id: '',
                pid: '',
                pName: '',
                title: '',
                code: '',
                grade: '',
                sort: '',
                remark: ''
            },
            treeRules: {
                title: [
                    { required: true, message: '名称不能为空', trigger: 'blur'},
                    {type: 'string', max: 50, message: '不能超过50个字符', trigger: 'blur'}
                ],
                code: [
                    { required: true, message: '编号不能为空', trigger: 'blur'},
                    {type: 'string', max: 50, message: '不能超过50个字符', trigger: 'blur'}
                ],
                sort: [
                    {type:'number', message: '排序为数字', trigger: 'blur'}
                ]
            },
            hasSubmit: false,
            status: 'wait',
            showTitle: '字典详情',
            commitTarget: 'update'
        }
    },
    created () {
        // 监听选择树状结构消息---dictionaryTree发送的消息
        BUS.$on('dictionarySelectNode', (msg) => {
            console.log('组件收到消息***msg:' + msg)
            this.commitTarget = msg.operaName
            this.getTreeMsg(msg.treeId)
        })
        // 监听点击添加按钮消息
        BUS.$on('dictionaryWantToAddNode', (msg) => {
            console.log('组件收到消息***dictionaryWantToAddNode:' + msg)
            // 改变commitTarget的值
            this.commitTarget = msg
            // 接收到“添加”的消息，需要把其他的信息置空
            if (msg === 'add') {
                this.tree.pName = this.tree.title
                this.tree.title = ''
                this.tree.code = ''
                this.tree.sort = ''
                this.tree.remark = ''

                // 改变title
                this.showTitle = '添加字典信息'
            }
        })
        // 监听删除按钮点击完清空右侧数据
        BUS.$on('dictionaryNodeDeleteComplete', (msg) => {
            console.log('组件收到消息***dictionaryNodeDeleteComplete:' + msg)
            // 接收到“删除完成”的消息，需要把其他的信息置空
            if (msg === 'deleteComplete') {
                this.tree.id = ''
                this.tree.pName = ''
                this.tree.title = ''
                this.tree.code = ''
                this.tree.sort = ''
                this.tree.remark = ''

                // 改变title
                this.showTitle = '字典详情'
            }
        })
    },
    methods: {
        getTreeMsg (msg) { // 获取字典信息
            let url = 'adminapi/dictionary/getDictionaryJsonById.html'
            let data = {
                id: msg
            }
            ajax.formRes(url, data).then(res => {
                // success
                console.log('**********dictioneryOperate查询树信息成功******************')
                this.tree.id = res.data.id
                this.tree.pid = res.data.pid
                this.tree.pName = res.data.pName
                this.tree.title = res.data.title
                this.tree.code = res.data.code
                this.tree.grade = res.data.grade
                this.tree.sort = res.data.sort
                this.tree.remark = res.data.remark
                console.log('**********dictioneryOperate显示树信息成功******************')
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        submitTreeMes () { // 提交保存字典信息----新增和修改用的同一个按钮
            this.$refs['tree'].validate((valid) => {
                if (valid) {
                    if (this.tree.id === '') {
                        this.$Message.success('还没有选择节点不能提交')
                        return
                    }
                    let url
                    // 需要去判断是做修改操作还是添加操作
                    if (this.commitTarget === 'update') {
                        url = 'adminapi/dictionary/updateDictionary.html'
                    } else {
                        url = 'adminapi/dictionary/addDictionary.html'
                    }
                    let data = {
                        id: this.tree.id,
                        pid: this.tree.id, // 新增时：pid为此树节点的id 。 因为子啊修改节点时不需要修改pid 所有暂时先这么写
                        code: this.tree.code,
                        grade: this.tree.grade,
                        sort: this.tree.sort,
                        dataValue: this.tree.title,
                        remark: this.tree.remark,
                        userId: window.localStorage.getItem('userId'),
                        userName: window.localStorage.getItem('userName')
                    }
                    console.log(data)
                    ajax.formRes(url, data).then(res => {
                        // success
                        console.log('***********dictionaryOPerate操作成功********通知dictionaryTree去重新加载树*****')
                        // 通知dictionaryTree去重新加载树
                        let MsgData = {
                            operaName: this.commitTarget,
                            treeId: res.data.id
                        }
                        BUS.$emit('dictionaryOperateComplete', MsgData)
                    }).catch(res => {
                        console.log('有错误信息')
                        // fail
                    })
                    this.hasSubmit = false
                    // 如果是add提交完之后调用重置
                    if (this.commitTarget !== 'update') {
                        this.resetTreeMes()
                    }
                } else {

                }
            })
        },
        resetTreeMes () { // 重置字典信息
            this.tree.title = ''
            this.tree.code = ''
            this.tree.sort = ''
            this.tree.remark = ''
        }
    }
}
</script>
dd
